import React from "react";
import { Route } from "react-router-dom";
// 导入TabBar组件
import { TabBar } from "antd-mobile";
// 1、在pages文件夹中创建News组件
// 2、在Home组建中添加一个Route作为子路由的出口
// 3、设置嵌套路由的path

// 导入组件
import News from "../News";
import HouseList from '../HouseList'
import Index from '../Index'
import Profile from '../Profile'
import './index.css'

// TarBar.Item数据
const tabItems = [
    {
      title: "首页",
      icon: "icon-ind",
      path: "/home",
    },
    {
      title: "找房",
      icon: "icon-findHouse",
      path: "/home/list",
    },
    {
      title: "资讯",
      icon: "icon-infom",
      path: "/home/news",
    },
    {
      title: "我的",
      icon: "icon-my",
      path: "/home/profile",
    },
  ];

class Home extends React.Component {
	// 状态代码
	state = {
		selectedTab: this.props.location.pathname,
	};
  // 当Home组件的内容发生更新的时候去调用
    componentDidUpdate(prevProps){
        if(prevProps.location.pathname !==this.props.location.pathname){
            this.setState({
                selectedTab:this.props.location.pathname
            })
        }
    }

  // 渲染TabBar.Item
  renderTabBarItem() {
    return tabItems.map((item) => (
      <TabBar.Item
        title={item.title}
        key={item.title}
        icon={<i className={`iconfont ${item.icon}`}></i>}
        selectedIcon={<i className={`iconfont ${item.icon}`}></i>}
        selected={this.state.selectedTab === item.path}
        onPress={() => {
          this.setState({
            selectedTab: item.path,
          });

          // 路由切换
          this.props.history.push(item.path);
        }}
      ></TabBar.Item>
    ));
  }

	render() {
		return (
			<div className='home'>

            <Route path='/home/news' component={News}></Route>
            <Route path='/home/list' component={HouseList}></Route>
            <Route path='/home' exact component={Index}></Route>
            <Route path='/home/profile' component={Profile}></Route>
				
					<TabBar tintColor="#21b97a" barTintColor="white"noRenderContent="true">
					{this.renderTabBarItem()}
					</TabBar>
			</div>
		);
	}
}
export default Home;
